<template>
    <view class="content">
      <scroll-view class="top"  scroll-y="true">
         <view class="header">
           <view class="title">
			    <img src="/static/logo.png" class="logo" mode="widthFix"></img>
               <text>{{title}}</text>
           </view>
		   <view class="desc" v-for="(item, index) in contentData" :key="index">
		   	   <text>{{item}}</text>
		   </view>
           <!-- <view class="desc">
               <text>河北省蛋品协会是经河北省肉类行业协会批准设立的专业分支机构(蛋品分会)。本协会由河北省内具有影响力的蛋鸡养殖企业、蛋品加工企业、饲料企业、设备供应商、科研机构及行业资深专家共同发起成立。协会在河北省肉类行业协会的领导和监督下，秉承“凝聚产业力量，塑造冀蛋品质，共创品牌价值，引领行业未来”的宗旨，致力于推动河北省蛋品产业由“产量大省”向“价值强省”转型升级。</text>
           </view>
           <view class="desc">
               <text>河北省作为全国蛋鸡养殖第一大省(存栏量约1.5-1.6亿羽，占全国总量18%)，拥有显著的规模化生产和饲料成本优势，是全国鸡蛋供应的“压舱石”。然而，长期以来，河北蛋品产业也面临着“产量高地、价格洼地”的困境，存在品牌化不足、深加工率低、外销依赖性强、缺乏终端定价权等核心挑战。协会依托强大的“专家指导委员会”提供智力支持，委员会由河北省蛋鸡产业体系首席专家刘华格研究员领衔，汇聚了省内顶尖的蛋鸡养殖、疫病防控、营养饲料、加工技术等领域专家。协会的发起单位及会员单位均为河北省蛋品产业链各环节的骨干企业，具有丰富的实践经验和影响力。</text>
           </view>
           <view class="desc">
               <text>河北省蛋品协会将团结全体会员及行业同仁，锐意进取，扎实工作。我们的愿景是:“河北鸡蛋”成为“安全、优质、价值”的代名词，铸就享誉全国乃至世界的“冀蛋优品”金字招牌，最终实现养殖户增收、企业增效、产业高质量发展的共赢局面，为河北省从“蛋鸡大省”迈向“蛋鸡强省”贡献核心力量!</text>
               <text class="desc-title">携手冀蛋，共创辉煌!</text>
           </view> -->
        </view>
        <view class="table" v-for="(item2, index2) in tableData" :key="index2" v-show="item2.length > 0">
            <text class="title">河北蛋协<text style="font-weight: bold;color: red;">{{ index2 == 0 ? '冀蛋优品' : '冀蛋臻品' }}</text>报价<text style="margin-left: 20rpx;">{{ date[0] }}年{{ date[1] }}月{{ date[2] }}日</text></text>
            <!-- <text class="tip" @click="lookMore">点击查看更多数据</text> -->
            <!-- <uni-table ref="table" border width=100% emptyText="暂无数据">
                <uni-tr class="head">
                    <uni-th width="30" align="center">地区</uni-th>
                    <uni-th width="40" align="center">鸡场名录</uni-th>
                    <uni-th width="10" align="center">品种</uni-th>
                    <uni-th width="10" align="center">规格与报价</uni-th>
                    <uni-th width="10" align="center">供应量/天</uni-th>
                    <uni-th width="10" align="center">价格动态</uni-th>
                    <uni-th width="20" align="center">备注</uni-th>
                </uni-tr>
                <uni-tr v-for="(item,index) in tableData[index2 - 1]" :key="index"  style="position: relative;">
                    <uni-th align="center" width="30" v-if="item.isShow" :rowspan="item.rows"> {{ item.adress }}</uni-th>
                    <uni-th align="center" width="40">{{ item.title }}</uni-th>
                    <uni-th align="center" width="10">{{ item.variety }}</uni-th>
                    <uni-th align="center" width="10">{{ item.num }}</uni-th>
                    <uni-th align="center" width="10">{{ item.money }}</uni-th>
                    <uni-th align="center" width="10" style="color:red;">{{ item.state }}</uni-th>
                    <uni-th align="center" width="20" style="color:rgb(54, 54, 250)">
                        <text @click="getDetail(index2, index)" style="font-weight: bold;" v-show="item.title != ''">详情</text>
                    </uni-th>
                </uni-tr>
        
            </uni-table> -->
            <!-- <table cellspacing="0" cellpadding="0" style="width: 100%;">
                <tr>
                    <th width="20" align="center">地区</th>
                    <th width="40" align="center">鸡场名录</th>
                    <th width="10" align="center">品种</th>
                    <th width="10" align="center">规格与报价</th>
                    <th width="10" align="center">供应量/天</th>
                    <th width="10" align="center">价格动态</th>
                    <th width="20" align="center">备注</th>
                </tr>
                <tr v-for="(item,index) in tableData[index2 - 1]" :key="index">
                    <td align="center" width="20" v-if="item.startRow == index" :rowspan="item.rows"> {{ item.adress }}</td>
                    <td align="center" width="40">{{ item.title }}</td>
                    <td align="center" width="10">{{ item.variety }}</td>
                    <td align="center" width="10">{{ item.num }}</td>
                    <td align="center" width="10">{{ item.money }}</td>
                    <td align="center" width="10" style="color:red;">{{ item.state }}</td>
                    <td align="center" width="20" style="color:rgb(54, 54, 250)">
                        <text @click="getDetail(index2, index)" style="font-weight: bold;" v-show="item.title != ''">详情</text>
                    </td>
                </tr>
            </table> -->
			
			<view style="width: 100%;" class="view-table">
			    <view class="th thead">
			        <view width="20" align="center">地区</view>
			        <view width="40" align="center">鸡场名录</view>
			        <view width="10" align="center">品种</view>
			        <view width="10" align="center">报价</view>
			        <view width="10" align="center">供应量/天</view>
			        <view width="10" align="center">价格动态</view>
			        <view width="20" align="center">备注</view>
			    </view>
			   <view v-for="(item,index) in tableData[index2]" :key="index" class="th">
			        <view align="center" width="20" v-if="item.startRow == index" class="show-row">
						<text :style="item.top">{{item.address}}</text>
					</view>
					<view align="center" width="20" v-else class="rowspan"></view>
			        <view align="center" width="40">{{ item.name }}</view>
			        <view align="center" width="10">{{ item.breed }}</view>
			        <view align="center" width="10">{{ parseInt(item.price) }}元/{{ item.weight }}斤</view>
			        <view align="center" width="10">{{ item.num }}箱</view>
			        <view align="center" width="10" :style="color[item.trend]">{{ item.trend == 1 ? '涨' : item.trend == -1 ? '跌' : '平' }}</view>
			        <view align="center" width="20" style="color:rgb(54, 54, 250)"  @click="getDetail(item.chicken_farm_id)">
			            <text style="font-weight: bold;" v-show="item.title != ''">详情</text>
			        </view>
			    </view>
			</view>

         </view>
      </scroll-view>
      <view class="footer">
         <text class="title">免责声明:</text>
         <text>1、本协会不直接从事蛋品生产、加工、销售、储运等具体经营活动。</text>
         <text> 2、本协会力求发布信息的准确性与及时性，但无法保证所有信息的绝对完整、精确或实时更新。</text>
         <text>3、会员或第三方之间基于本协会提供的信息或平台达成的所有交易及因此产生的权利义务商业风险、经济纠纷，均由交易各方自行协商解决或通过法律途径解决，本协会对此不承担任何责任。</text>
      </view>
    </view>
</template>

<script>
import { projectTargetList  } from './row.js'
import { getChickenHome } from '@/api/index.js'

export default {
    data() {
        return {
			tableData: [],
			date: [],
			color: {
				'1': 'color:red;',
				'-1': 'color:green;',
				'0': 'color:#000;'
			},
			title: '',
			contentData: []
        }
    },
    onLoad  () {
		uni.showLoading({
			title: '加载中...'
		});
		this.getChickenHome()
        let date = new Date()
        this.date = [date.getFullYear(), date.getMonth() + 1, date.getDate()]
    },
    methods: {
		getChickenHome () {
			getChickenHome().then(res => {
				this.title = res.data.association.title
				this.contentData = res.data.association.content.split('\n')
                const yp = []
				const zp = []
				res.data.chickenPrice.forEach((item, index) => {
					if (item.type == 0) {
						yp.push(item)
					} else {
						zp.push(item)
					}
				})
				this.getRow(yp,zp)
			}).finally(() => {
				uni.hideLoading()
			})
		},
		getRow (data1,data2) {
			// if (data1.length > 0) {
			// 	this.tableData.push(data1)
			// }
			// if (data2.length > 0) {
			// 	this.tableData.push(data2)
			// }
			this.tableData.push(data1)
			this.tableData.push(data2)
			this.tableData.forEach((item, index) => {
				if (item.length > 0) {
					item = projectTargetList(item)
					item.forEach((item2, index2) => {
						if (item2.startRow == index2) {
							item2.top = this.getTop(item2.startRow, item2.endRow)
						}
					})
				}
			})
		},
        getDetail(id) {
            uni.navigateTo({
                url: `/pages/showDetail/index?id=${id}`
            })
        },
		getTop (start, end) {
			const num = end - start
			let top = 0
			if (num == 2) {
				return `top: ${80}rpx;`
			} else if (num > 2){
				top = parseInt((num*60)/2)
				return `top: ${top+40}rpx;`
			}
		}
    },
	// 分享朋友圈
	onShareTimeline(res) {
		return {
		  title: '河北蛋协鸡蛋报价',
		  //imageUrl: 'http://demo.png',
		  path: '/pages/showIndex/index'
		}
	},
	// 分享好友
	onShareAppMessage() {
	    return {
	      title: '河北蛋协鸡蛋报价',
	      path: '/pages/showIndex/index'
	    }
	}
}
</script>

<style lang="scss" scoped>
.content {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    flex-direction: column;
    .top {
      flex: 1;
        .header {
          width: 100%;
          .title {
            min-height: 260rpx;
            background-color: rgb(238, 130, 47);
            text-align: center;
            box-sizing: border-box;
            border-bottom: 1rpx solid #000;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-top: 50rpx;
            text {
                font-size: 50rpx;
                font-weight: bold;
                color: #fff;
				padding-bottom: 20rpx;
            }
			.logo {
               width: 600rpx;
			}
          }
          .desc {
            width: 100%;
            box-sizing: border-box;
            padding: 20rpx 10rpx;
            border-bottom: 1rpx solid #e6e6e6;
            text-indent: 2em;
            text {
                font-size: 34rpx;
                color: #000;
                line-height: 50rpx;
            }
            .desc-title {
                display: block;
                margin-left: 50rpx;
                margin-top: 20rpx;
            }
          }
        }
        .table {
          width: 100%;
          border-top: 1rpx solid #000;
          .title {
                display: block;
                width: 100%;
                text-align: center;
                font-size: 30rpx;
                color: #000;
                margin: 30rpx 0;
            }
        }
        .table:last-child {
            margin: 60rpx 0;
        }
    }
    .footer {
       width: 100%;
       background-color: rgb(238, 130, 47);
       box-sizing: border-box;
       padding: 20rpx;
	   padding-bottom: 60rpx;
       .title {
           display: block;
           font-size: 28rpx;
           color: #fff;
           font-weight: bold;
           margin: 0 0 10rpx 0;
       }
       text {
           font-size: 22rpx;
           color: #fff;
           display: block;
           line-height: 35rpx;
       }
    }
    // .uni-table {
    //     table-layout: fixed;
    //     overflow: hidden;
    //     text-overflow: ellipsis; //省略号表示
    //     white-space: nowrap; //不换行
    //     .head {
    //         background-color: rgb(238, 130, 47);
    //         .uni-table-th {
    //             color: #fff !important;
    //             font-weight: bold;
    //         }
    //     }

    //     .uni-table-td {
    //         table-layout: inherit;
    //         overflow: hidden;
    //         text-overflow: ellipsis; //省略号表示
    //         white-space: nowrap; //不换行
    //     }

    //     .uni-table-th {
    //         box-sizing: border-box;
    //         padding: 8rpx 5rpx;
    //         color: #333;
    //         font-weight: 400;
    //         border-color: #000;
    //     }
    // }
    // table {
    //     border: 1rpx solid #000;
    //     th,
    //     td {
    //         border-right: 1rpx solid #000;
    //         border-bottom: 1rpx solid #000;
        
    //     &:last-child {
    //         border-right: none;
    //     }
    //     }
    
    //     &:last-child {
    //         border-bottom: none;
    //         border-top: none;
    //     }
    
    //     th {
    //        background-color: rgb(238, 130, 47);
    //        color: #fff;
    //     }
    
    //     th,
    //     td {
    //         height: 60rpx;
    //         box-sizing: border-box;
    //     }
    // }
    .view-table {
		display: table;
		border-bottom: 1rpx solid #000;
		.thead {
			background-color: rgb(238, 130, 47);
			color: #fff;
			font-weight: bold;
		}
		.th {
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 30rpx;
			font-size: 28rpx;
			position: relative;
			view {
				width: 100%;
				height: 60rpx;
				padding: 10rpx 0;
				flex: 3;
				border-right: 1rpx solid #000;
				border-top: 1rpx solid #000;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
			}
			view:nth-child(2),view:nth-child(4) {
				flex: 4;
				text-align: center;
			}
			view:nth-child(6) {
				flex: 2;
			}
			.rowspan {
				border-top: 1rpx solid #fff;
				border-bottom: 1rpx solid #fff;
			}
			.show-row {
				position: relative;
				text {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					z-index: 10;
				}
			}
		}
	}
}
</style>